<template>
    <div class="panel-body panel-list">
        <div class="panel-header">
            <div class="panel-title">
                {{ meta_name }}
            </div>
        </div>
        <div class="panel-main">
            <div class="panel-btns">
                <el-button type="success" icon="fa fa-refresh" @click="list()" size="small"> 刷新</el-button>
            </div>
            <div class="panel-search">
                <div class="panel-search-item">
                    <el-input  size="medium" v-model="params.uid" clearable placeholder="请输入用户ID" class="input-with-select">
                        <el-button type="primary" @click="search()" slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
            </div>
            <el-table v-loading="loading"
                      element-loading-text="努力加载中..."
                      element-loading-spinner="el-icon-loading"
                      ref="multipleHandle"
                      tooltip-effect="dark"
                      :data="listData.data" border>
                <el-table-column align="center" prop="id" label="编号" width="55"></el-table-column>
                <el-table-column prop="username" label="用户名" width="120"></el-table-column>
                <el-table-column align="center" prop="mumber" label="积分" width="150">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.type == 1" type="danger" style="width: 50px">+ {{ scope.row.mumber }}</el-tag>
                        <el-tag v-if="scope.row.type == 2" type="success" style="width: 50px">- {{ scope.row.mumber }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="note" label="积分说明" width="350"></el-table-column>
                <el-table-column prop="created_at" label="日期">
                    <template slot-scope="scope">
                        {{moment(scope.row.created_at).format('YYYY-MM-DD HH:mm:ss')}}
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination"  v-if="!loading && listData && listData.total">
                <div class="pagination-total">共 <em> {{listData.total}} </em> 条记录</div>
                <el-pagination v-if="listData.last_page > 1"
                               background
                               :page-size="listData.per_page"
                               layout="prev, pager, next, jumper"
                               :total="listData.total"
                               prev-text="上一页"
                               next-text="下一页"
                               :current-page="listData.current_page"
                               @current-change="changePage">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<!---->
<script>
import {mapGetters} from 'vuex';
import {IntegralList} from '@/utils/request';
export default {
    computed: {
        ...mapGetters(['meta_name','loading']),
    },
    data() {
        return {
            listData: [],//列表数据
            params: {page: 1, uid: ''},
        }
    },
    activated() {
        this.$store.dispatch('setActive', '/integral');
        if(this.$route.query.id){
            this.params.uid = this.$route.query.id;
        }else{
            this.params.uid = '';
        }
        this.list();
        console.log(4)

    },
    methods: {
        //列表
        list(){
            this.$store.dispatch('setLoading', true);
            IntegralList({params: this.params}).then((res)=>{
                if (res.code) {
                    this.$notify.error({title: 'ERROR', message: res.msg});
                } else {
                    this.listData = res.data;
                }
                this.$store.dispatch('setLoading', false);
            })
        },
        //筛选
        search(){
            this.params.page = 1;
            this.list();
        },
        //分页
        changePage(val) {
            this.params.page = val;
            this.list();
        },
    }
}
</script>
